<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Cool Office System</title>
  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css">
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>
  <style>
    body {
      background-color: #f5f5f5;
    }
    .navbar {
      background-color: #000;
      color: #fff;
    }
    .navbar-brand {
      font-size: 24px;
      font-weight: bold;
      text-shadow: 1px 1px #fff;
    }
    .nav-link {
      font-size: 18px;
      font-weight: bold;
      text-shadow: 1px 1px #fff;
    }
    .jumbotron {
      background-image: url('https://cdn.pixabay.com/photo/2017/08/10/08/47/workplace-2620110_960_720.jpg');
      background-size: cover;
      height: 500px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      color: #fff;
      text-shadow: 1px 1px #000;
    }
    .jumbotron h1 {
      font-size: 64px;
      margin-bottom: 20px;
    }
    .jumbotron p {
      font-size: 24px;
      margin-bottom: 50px;
    }
    .btn-primary {
      background-color: #000;
      border-color: #000;
      font-weight: bold;
      text-shadow: 1px 1px #fff;
    }
    .btn-primary:hover {
      background-color: #fff;
      color: #000;
      text-shadow: none;
    }
    .card {
      margin-top: 50px;
      border-radius: 10px;
      box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
    }
    .card-img-top {
      border-radius: 10px 10px 0 0;
    }
    .card-body {
      text-align: center;
    }
    .card-title {
      font-size: 24px;
      font-weight: bold;
      margin-bottom: 20px;
    }
    .card-text {
      font-size: 18px;
      margin-bottom: 20px;
    }
  </style>
</head>
<body>
<nav class="navbar navbar-expand-lg">
  <a class="navbar-brand" href="#">Cool Office System</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Services</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>
    </ul>
  </div>
</nav>
<div class="jumbotron">
  <h1>Welcome to Cool Office System</h1>
  <p>We provide the best office solutions for you</p>
  <a href="#" class="btn btn-primary btn-lg">Get Started</a>
</div>
<div class="container">
  <div class="row">
    <div class="col-md-4">
      <div class="card">
        <img class="card-img-top" src="https://cdn.pixabay.com/photo/2016/02/19/11/19/computer-1209641_960_720.jpg" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">Computer Services</h5>
          <p class="card-text">We provide computer repair, maintenance and upgrade services for your office</p>
          <a href="#" class="btn btn-primary">Learn More</a>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card">
        <img class="card-img-top" src="https://cdn.pixabay.com/photo/2017/09/25/13/12/printer-2781505_960_720.jpg" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">Printer Services</h5>
          <p class="card-text">We provide printer repair, maintenance and supply services for your office</p>
          <a href="#" class="btn btn-primary">Learn More</a>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card">
        <img class="card-img-top" src="https://cdn.pixabay.com/photo/2016/11/19/14/00/code-1839406_960_720.jpg" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">Software Services</h5>
          <p class="card-text">We provide software development, installation and maintenance services for your office</p>
          <a href="#" class="btn btn-primary">Learn More</a>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>
